<html>
<head>

<script src="__STATIC__/js/jquery-1.11.3.min.js"></script>
<script src="__STATIC__/layer/layer.js"></script>
<script src="__STATIC__/js/Validform_v5.3.2_min.js"></script>
<script src="__STATIC__/js/Validform_Datatype.js"></script>
<script>
    $(function () {

        var h = $(window).height();

        $(".board").css({height: h + "px"});
    })
</script>

<style>
    .first .form-control {
        font-size: 12px;
        width: 120px;
        height: 24px;
        line-height: 24px;
        background-color: #fff;
        border: 1px solid #ccc;
        outline: none;
        color: #333;
        display: block;
    }

    .first textarea {
        width: 242px;
        height: 24px;
        font-size: 12px;
        line-height: 20px;
        resize: none;
        border: 1px solid #CECECE;
        outline: none;
        background: #ffffff;
        color: #333;
        text-indent: 10px;
    }

    .first textarea::-webkit-input-placeholder {
        font-family: '微软雅黑';
    }

    .first > div .text {
        font-size: 12px;
        width: 242px;
        height: 24px;
        line-height: 24px;
        background-color: #fff;
        border: 1px solid #ccc;
        outline: none;
        color: #333;
        text-indent: 10px;
    }

    .info {
        width: 100%;
        background: white;
    }

    .info .title {
        background: #F3F3F3;
        font-size: 12px;
        line-height: 32px;
        color: #666666;
        padding-left: 20px;
    }

    .info .title span {
        color: #E03025;
    }

    .tabcon {
        width: 650px;
        margin: 30px auto;
    }

    .left_title {
        width: 80px;
        padding-left: 20px;
        float: left;
        position: relative;
        font-size: 12px;
        line-height: 24px;
    }

    .must::before {
        position: absolute;
        content: '*';
        left: 7px;
        top: 3px;
        font-size: 20px;
        color: #E03025;
    }

    .first > div {
        margin-top: 12px;
        overflow: hidden;
    }

    .main {
        float: left;
    }

    .form-control_num {
        width: 90px !important;
        margin-bottom: 0;
        margin-right: 10px;
    }

    .pri {
        margin-left: 100px;
        margin-top: 20px;
    }

    .pri .checkbox + label {
        -webkit-appearance: none;
        background: url("assets/img/before.jpg") no-repeat center left;
        background-size: 16px 16px;
        padding-left: 25px;
        color: #363636;
        font-size: 12px;
    }

    /*.pri .checkbox {*/
    /*display: none;*/
    /*}*/

    .pri .checkbox:checked + label {
        background: url("/assets/img/after.jpg") no-repeat center left;
    }

    .submit {
        width: 114px;
        height: 25px;
        line-height: 25px;
        background: #E03025;
        color: white;
        border-radius: 4px;
        text-align: center;
        border: none;
        outline: none;
        margin-left: 100px;
    }
</style>
</head>
<div class="info">
    <div class="title"><span>新增收货地址 　</span>电话号码、手机号选填一项, 其余均为必填项</div>
    <div class="tabcon">
        <div class="cur">
            <form action="{:url('shop/address/edit_address0')}" method="post" id="address">
                <div class="first">
                    <div>
                        <div class="left_title must">所在地区</div>
                        <div class="main">
                            <form role="form">
                                <div class="form-group" style="float: left;">
                                    <select class="form-control" id="one_area" onchange="change_area()">
                                        {volist name='area' id='item'}
                                        <option value="{$item.area_id}" {if condition="$area_info1.area_parent_id eq $item.area_id"} selected {/if}>{$item.area_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </form>
                            <font id="two_level"></font>
                            <font id="three_level"></font>
                            <input type="hidden" id="selected" name="area_info1"/>
                            <input type="hidden" id="selected1" name="area_info2"/>
                            <input type="hidden" id="selected2" name="area_info3"/>
                            <input type="hidden"  name="id" value="{$data['id']}"/>
                            <input type="hidden"  name="member_id" value="{$data['member_id']}"/>
                            <input type="hidden"  name="status" value="{$data['status']}"/>
                        </div>
                    </div>
                    <div>
                        <div class="left_title must">详细地址</div>
                        <div class="main">
                            <textarea style="width:350px;height:50px;" maxlength="40" placeholder="建议您写一下详细地址～" name="address" datatype="*">{$data['address']}</textarea>
                        </div>
                    </div>
                    <div>
                        <div class="left_title must">收货人</div>
                        <div class="main">
                            <div><input type="text" class="text" placeholder="请输入收货人姓名" name="name" value="{$data['name']}" datatype="hanzi" errormsg="请输入正确格式的姓名！"
                                        nullmsg="收货人地址不能为空"></div>
                        </div>
                    </div>
                    <div>
                        <div class="left_title must">手机号码</div>
                        <div class="main">
                            <form role="form" style="float: left;margin-bottom: 0;">
                                <div class="form-group"><select class="form-control form-control_num">
                                    <option>中国大陆</option>
                                </select></div>
                            </form>
                            <input type="text" class="text" placeholder="请填写手机号" name="phone" value="{$data['phone']}" datatype="*">
                        </div>
                    </div>
                    {eq name="$data['status']" value="0"}
                    <div class="pri">
                        <input type="checkbox" id="radio-2" name="status" class="checkbox" value="1"/>
                        <label for="radio-2"> 设置为默认收货地址 </label>
                    </div>
                    {/eq}
                    <br> <input type="submit" value="保存收货人信息" class="submit" id="sub_address"></div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
       $('.layui-layer-title').innerHTML="收货地址";
    });
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    // 地区三级联动

       function change_area() {
           var one = $('#one_area').val();
           $.post("{:url('shop/Area/set_area')}", {'id': one}, function (t) {

               var html = '<form role="form" id="form"><div class="form-group" style="float: left;width: 20%;"><select id="two_area" onchange="change_there_area()" class="form-control">';
               for (var i = 0; i < t.length; i++) {
                   if (t[i].area_id=="{$area_info1.area_id}"){
                       html += '<option value="' + t[i].area_id + '" selected>' + t[i].area_name + '</option>';
                   }else {
                       html += '<option value="' + t[i].area_id + '">' + t[i].area_name + '</option>';
                   }

               }
               $('#two_level').html(html + '</select></div></form>');
               change_there_area();
           });

           // 获取选中的option 的 text值
           var item = document.getElementById("one_area");
           var text = item.options[item.selectedIndex].text;
           $("#selected").val(text);
       }
       function change_there_area() {
           var two = $('#two_area').val();
           $.post("{:url('shop/Area/set_area')}", {'id': two}, function (t) {
               var html = '<form role="form" id="form"><div class="form-group" style="float: left;width: 20%;"><select name="area_id" class="form-control" onchange="set_zhi(this.options[this.selectedIndex].text)">';
               for (var i = 0; i < t.length; i++) {
                   if (i == 0) {
                       set_zhi(t[i].area_name)
                   };

                   if (t[i].area_id == "{$area_info.area_id}"){
                       html += '<option value="' + t[i].area_id + '" selected>' + t[i].area_name + '</option>';
                   }else {
                       html += '<option value="' + t[i].area_id + '" >' + t[i].area_name + '</option>';
                   }

               }
               $('#three_level').html(html + '</select></div></form>');
           });

           // 获取选中的option 的 text值
           var item = document.getElementById("two_area");
           var text = item.options[item.selectedIndex].text;
           $("#selected1").val(text);
       }

       function set_zhi(zhi) {
           $('#selected2').val(zhi);
       }



    $(function () {
        // 表单验证
        $.Tipmsg.r = null;
        $.Tipmsg.p = null;
        $.Datatype.hanzi = /^\s*[\u4e00-\u9fa5]{2,5}\s*$/;
        var address = $('#address').Validform({
            tiptype: function (msg) {
                layer.msg(msg, {icon: 2});
            },

            btnSubmit: '#sub_address',
            tipSweep: true,

            // 个人信息提交
            ajaxPost: true,
            callback: function (t) {
                if (t.code == 200) {
                    layer.msg('修改成功', {icon: 1});
                    parent.location.reload();
//                    parent.layer.tips('Look here', '#parentIframe', {time: 5000});
                    parent.layer.close(index);


                } else {
                    layer.msg('网络繁忙稍后再试', {icon: 2});
                }
            }
        });

        address.config({
            url: "{:url('shop/address/edit_address0')}"
        });

        change_area();
        change_there_area();
    });
</script>
</html>
